<template>
  <div class="upload-test">
    <h2>图片上传组件测试</h2>
    
    <div class="test-section">
      <h3>头像上传 - contain模式（完整显示）</h3>
      <div class="test-item">
        <AvatarUpload
          v-model="avatar1"
          size="large"
          fit="contain"
          @success="handleSuccess"
        />
        <div class="test-info">
          <p>fit="contain" - 图片完整显示，可能有留白</p>
          <p>适合：需要看到完整图片的场景</p>
        </div>
      </div>
    </div>

    <div class="test-section">
      <h3>头像上传 - cover模式（填充显示）</h3>
      <div class="test-item">
        <AvatarUpload
          v-model="avatar2"
          size="large"
          fit="cover"
          @success="handleSuccess"
        />
        <div class="test-info">
          <p>fit="cover" - 图片填充整个区域，可能裁剪</p>
          <p>适合：头像、圆形显示的场景</p>
        </div>
      </div>
    </div>

    <div class="test-section">
      <h3>普通图片上传 - contain模式</h3>
      <div class="test-item">
        <ImageUpload
          v-model="image1"
          category="product"
          fit="contain"
          style="width: 200px; height: 150px;"
          @success="handleSuccess"
        />
        <div class="test-info">
          <p>fit="contain" - 完整显示图片</p>
          <p>适合：产品图片、文档图片</p>
        </div>
      </div>
    </div>

    <div class="test-section">
      <h3>普通图片上传 - cover模式</h3>
      <div class="test-item">
        <ImageUpload
          v-model="image2"
          category="banner"
          fit="cover"
          style="width: 300px; height: 150px;"
          @success="handleSuccess"
        />
        <div class="test-info">
          <p>fit="cover" - 填充显示，保持比例</p>
          <p>适合：轮播图、背景图</p>
        </div>
      </div>
    </div>

    <div class="test-section">
      <h3>当前图片URLs</h3>
      <div class="url-display">
        <p><strong>头像1 (contain):</strong> {{ avatar1 || '未上传' }}</p>
        <p><strong>头像2 (cover):</strong> {{ avatar2 || '未上传' }}</p>
        <p><strong>图片1 (contain):</strong> {{ image1 || '未上传' }}</p>
        <p><strong>图片2 (cover):</strong> {{ image2 || '未上传' }}</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import AvatarUpload from '@/components/upload/AvatarUpload.vue'
import ImageUpload from '@/components/upload/ImageUpload.vue'

// 响应式数据
const avatar1 = ref('')
const avatar2 = ref('')
const image1 = ref('')
const image2 = ref('')

// 上传成功处理
const handleSuccess = (fileInfo) => {
  ElMessage.success(`上传成功: ${fileInfo.original_name}`)
  console.log('上传成功:', fileInfo)
}
</script>

<style scoped>
.upload-test {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
}

.test-section {
  margin-bottom: 40px;
  padding: 20px;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  background-color: #fafafa;
}

.test-section h3 {
  margin-top: 0;
  color: #303133;
}

.test-item {
  display: flex;
  align-items: center;
  gap: 30px;
}

.test-info {
  flex: 1;
}

.test-info p {
  margin: 5px 0;
  font-size: 14px;
  color: #606266;
}

.url-display {
  background-color: #f5f7fa;
  padding: 15px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 12px;
}

.url-display p {
  margin: 8px 0;
  word-break: break-all;
}
</style>
